<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="generator" content="VuePress 2.0.0-rc.26" />
    <style>
      :root {
        --vp-c-bg: #fff;
      }

      [data-theme='dark'] {
        --vp-c-bg: #1b1b1f;
      }

      html,
      body {
        background-color: var(--vp-c-bg);
      }
    </style>
    <script>
      const useChoice = localStorage.getItem('vuepress-color-scheme')
      const systemStatus =
        'matchMedia' in window
          ? window.matchMedia('(prefers-color-scheme: dark)').matches
          : false

      if (useChoice === 'light') {
        document.documentElement.dataset.theme = 'light'
      } else if (useChoice === 'dark' || systemStatus) {
        document.documentElement.dataset.theme = 'dark'
      }
    </script>
    <link rel="icon" href="/favicon.ico"><meta name="keywords" content="VuePress, 博客, Vue, 前端, 技术文档"><meta name="author" content="Your Name"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速开始 | VuePress 项目博客</title><meta name="description" content="一个现代化的VuePress项目博客，支持自动化部署到GitHub Pages和Gitee Pages">
    <link rel="preload" href="/assets/style-DGGaDeUC.css" as="style"><link rel="stylesheet" href="/assets/style-DGGaDeUC.css">
    <link rel="modulepreload" href="/assets/app-CeP0rJKV.js"><link rel="modulepreload" href="/assets/getting-started.html-BUyUb3H7.js">
    <link rel="prefetch" href="/assets/index.html-BryeMxkA.js" as="script"><link rel="prefetch" href="/assets/index.html-A6t1BTbL.js" as="script"><link rel="prefetch" href="/assets/index.html-aPSi50t1.js" as="script"><link rel="prefetch" href="/assets/vuepress-guide.html-BmS9BHOu.js" as="script"><link rel="prefetch" href="/assets/index.html-COdfVJog.js" as="script"><link rel="prefetch" href="/assets/404.html-CbKdPou9.js" as="script"><link rel="prefetch" href="/assets/index-BzBQJFYZ.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="vp-theme-container external-link-icon" vp-container><!--[--><header class="vp-navbar" vp-navbar><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href="/"><img class="vp-site-logo" src="/logo.png" alt="VuePress 项目博客"><span class="vp-site-name vp-hide-mobile" aria-hidden="true">VuePress 项目博客</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/" aria-label="首页"><!--[--><!--[--><!--]--><!--]-->首页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/blog/" aria-label="博客"><!--[--><!--[--><!--]--><!--]-->博客<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link route-link-active auto-link" href="/docs/" aria-label="文档"><!--[--><!--[--><!--]--><!--]-->文档<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/about/" aria-label="关于"><!--[--><!--[--><!--]--><!--]-->关于<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/your-username/vuepress-blog" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->GitHub<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/your-username/vuepress-blog" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->GitHub<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button type="button" class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" placeholder="搜索文档" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar" vp-sidebar><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/" aria-label="首页"><!--[--><!--[--><!--]--><!--]-->首页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/blog/" aria-label="博客"><!--[--><!--[--><!--]--><!--]-->博客<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link route-link-active auto-link" href="/docs/" aria-label="文档"><!--[--><!--[--><!--]--><!--]-->文档<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/about/" aria-label="关于"><!--[--><!--[--><!--]--><!--]-->关于<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/your-username/vuepress-blog" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->GitHub<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/your-username/vuepress-blog" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!--]--><!--]-->GitHub<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active">使用指南 <!----></p><ul class="vp-sidebar-children" style=""><!--[--><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="/docs/getting-started.html" aria-label="快速开始"><!--[--><!--[--><!--]--><!--]-->快速开始<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/docs/configuration.html" aria-label="/docs/configuration.html"><!--[--><!--[--><!--]--><!--]-->/docs/configuration.html<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/docs/deployment.html" aria-label="/docs/deployment.html"><!--[--><!--[--><!--]--><!--]-->/docs/deployment.html<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/docs/customization.html" aria-label="/docs/customization.html"><!--[--><!--[--><!--]--><!--]-->/docs/customization.html<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading">高级功能 <!----></p><ul class="vp-sidebar-children" style=""><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="/docs/plugins.html" aria-label="/docs/plugins.html"><!--[--><!--[--><!--]--><!--]-->/docs/plugins.html<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/docs/themes.html" aria-label="/docs/themes.html"><!--[--><!--[--><!--]--><!--]-->/docs/themes.html<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/docs/api-reference.html" aria-label="/docs/api-reference.html"><!--[--><!--[--><!--]--><!--]-->/docs/api-reference.html<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div vp-content><!--[--><!--]--><div id="content"><h1 id="快速开始" tabindex="-1"><a class="header-anchor" href="#快速开始"><span>快速开始</span></a></h1><p>本指南将帮助你快速搭建和运行VuePress项目博客。</p><h2 id="🛠️-环境准备" tabindex="-1"><a class="header-anchor" href="#🛠️-环境准备"><span>🛠️ 环境准备</span></a></h2><h3 id="系统要求" tabindex="-1"><a class="header-anchor" href="#系统要求"><span>系统要求</span></a></h3><ul><li><strong>Node.js</strong>: 16.0.0 或更高版本</li><li><strong>包管理器</strong>: 推荐使用 PNPM，也支持 NPM 和 Yarn</li><li><strong>Git</strong>: 用于版本控制和部署</li></ul><h3 id="安装-node-js" tabindex="-1"><a class="header-anchor" href="#安装-node-js"><span>安装 Node.js</span></a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token comment"># 使用 Node Version Manager (推荐)</span></span>
<span class="line"><span class="token function">curl</span> -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh <span class="token operator">|</span> <span class="token function">bash</span></span>
<span class="line">nvm <span class="token function">install</span> <span class="token function">node</span></span>
<span class="line">nvm use <span class="token function">node</span></span>
<span class="line"></span>
<span class="line"><span class="token comment"># 验证安装</span></span>
<span class="line"><span class="token function">node</span> <span class="token parameter variable">--version</span>  <span class="token comment"># 应该显示 v16.0.0 或更高</span></span>
<span class="line"><span class="token function">npm</span> <span class="token parameter variable">--version</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="安装-pnpm" tabindex="-1"><a class="header-anchor" href="#安装-pnpm"><span>安装 PNPM</span></a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token comment"># 安装 PNPM</span></span>
<span class="line"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> <span class="token function">pnpm</span></span>
<span class="line"></span>
<span class="line"><span class="token comment"># 验证安装</span></span>
<span class="line"><span class="token function">pnpm</span> <span class="token parameter variable">--version</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="📦-项目创建" tabindex="-1"><a class="header-anchor" href="#📦-项目创建"><span>📦 项目创建</span></a></h2><h3 id="方法一-使用模板-推荐" tabindex="-1"><a class="header-anchor" href="#方法一-使用模板-推荐"><span>方法一：使用模板（推荐）</span></a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token comment"># 克隆项目模板</span></span>
<span class="line"><span class="token function">git</span> clone https://github.com/your-username/vuepress-blog.git my-blog</span>
<span class="line"><span class="token builtin class-name">cd</span> my-blog</span>
<span class="line"></span>
<span class="line"><span class="token comment"># 安装依赖</span></span>
<span class="line"><span class="token function">pnpm</span> <span class="token function">install</span></span>
<span class="line"></span>
<span class="line"><span class="token comment"># 启动开发服务器</span></span>
<span class="line"><span class="token function">pnpm</span> docs:dev</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="方法二-从零开始" tabindex="-1"><a class="header-anchor" href="#方法二-从零开始"><span>方法二：从零开始</span></a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token comment"># 创建项目目录</span></span>
<span class="line"><span class="token function">mkdir</span> my-vuepress-blog</span>
<span class="line"><span class="token builtin class-name">cd</span> my-vuepress-blog</span>
<span class="line"></span>
<span class="line"><span class="token comment"># 初始化项目</span></span>
<span class="line"><span class="token function">pnpm</span> init</span>
<span class="line"></span>
<span class="line"><span class="token comment"># 安装 VuePress</span></span>
<span class="line"><span class="token function">pnpm</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> vuepress@next @vuepress/bundler-vite@next @vuepress/theme-default@next</span>
<span class="line"></span>
<span class="line"><span class="token comment"># 创建基本的项目结构</span></span>
<span class="line"><span class="token function">mkdir</span> <span class="token parameter variable">-p</span> docs/.vuepress</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="🏗️-项目结构" tabindex="-1"><a class="header-anchor" href="#🏗️-项目结构"><span>🏗️ 项目结构</span></a></h2><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">my-blog/</span>
<span class="line">├── docs/                           # 文档源文件</span>
<span class="line">│   ├── .vuepress/                  # VuePress 配置</span>
<span class="line">│   │   ├── components/             # Vue 组件</span>
<span class="line">│   │   ├── public/                 # 静态资源</span>
<span class="line">│   │   ├── styles/                 # 样式文件</span>
<span class="line">│   │   ├── config.js               # 主配置文件</span>
<span class="line">│   │   └── client.js               # 客户端配置</span>
<span class="line">│   ├── blog/                       # 博客文章</span>
<span class="line">│   ├── docs/                       # 文档页面</span>
<span class="line">│   └── README.md                   # 首页</span>
<span class="line">├── .github/                        # GitHub 配置</span>
<span class="line">│   └── workflows/                  # GitHub Actions</span>
<span class="line">├── package.json                    # 项目配置</span>
<span class="line">├── pnpm-lock.yaml                  # 依赖锁定</span>
<span class="line">└── README.md                       # 项目说明</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="⚙️-基本配置" tabindex="-1"><a class="header-anchor" href="#⚙️-基本配置"><span>⚙️ 基本配置</span></a></h2><h3 id="创建配置文件" tabindex="-1"><a class="header-anchor" href="#创建配置文件"><span>创建配置文件</span></a></h3><p>创建 <code>docs/.vuepress/config.js</code>：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineUserConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vuepress&#39;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defaultTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@vuepress/theme-default&#39;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineUserConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">  <span class="token comment">// 站点配置</span></span>
<span class="line">  <span class="token literal-property property">lang</span><span class="token operator">:</span> <span class="token string">&#39;zh-CN&#39;</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;我的博客&#39;</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;分享技术，记录成长&#39;</span><span class="token punctuation">,</span></span>
<span class="line">  </span>
<span class="line">  <span class="token comment">// 主题配置</span></span>
<span class="line">  <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token function">defaultTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">navbar</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">      <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">&#39;首页&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">      <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">&#39;博客&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/blog/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">      <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">&#39;关于&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/about/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="创建首页" tabindex="-1"><a class="header-anchor" href="#创建首页"><span>创建首页</span></a></h3><p>创建 <code>docs/README.md</code>：</p><div class="language-markdown line-numbers-mode" data-highlighter="prismjs" data-ext="md"><pre><code class="language-markdown"><span class="line"><span class="token front-matter-block"><span class="token punctuation">---</span></span>
<span class="line"><span class="token front-matter yaml language-yaml"><span class="token key atrule">home</span><span class="token punctuation">:</span> <span class="token boolean important">true</span></span>
<span class="line"><span class="token key atrule">heroText</span><span class="token punctuation">:</span> 欢迎来到我的博客</span>
<span class="line"><span class="token key atrule">tagline</span><span class="token punctuation">:</span> 分享技术，记录成长</span>
<span class="line"><span class="token key atrule">actions</span><span class="token punctuation">:</span></span>
<span class="line">  <span class="token punctuation">-</span> <span class="token key atrule">text</span><span class="token punctuation">:</span> 开始阅读</span>
<span class="line">    <span class="token key atrule">link</span><span class="token punctuation">:</span> /blog/</span>
<span class="line">    <span class="token key atrule">type</span><span class="token punctuation">:</span> primary</span></span>
<span class="line"><span class="token punctuation">---</span></span></span>
<span class="line"></span>
<span class="line"><span class="token title important"><span class="token punctuation">##</span> 最新文章</span></span>
<span class="line"></span>
<span class="line"><span class="token list punctuation">-</span> <span class="token url">[<span class="token content">VuePress 2.x 完全指南</span>](<span class="token url">./blog/vuepress-guide.md</span>)</span></span>
<span class="line"><span class="token list punctuation">-</span> <span class="token url">[<span class="token content">自动化部署实战</span>](<span class="token url">./blog/automated-deployment.md</span>)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="🚀-常用命令" tabindex="-1"><a class="header-anchor" href="#🚀-常用命令"><span>🚀 常用命令</span></a></h2><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token comment"># 开发模式</span></span>
<span class="line"><span class="token function">pnpm</span> docs:dev                <span class="token comment"># 启动开发服务器</span></span>
<span class="line"><span class="token function">pnpm</span> docs:dev <span class="token parameter variable">--port</span> <span class="token number">8080</span>   <span class="token comment"># 指定端口</span></span>
<span class="line"></span>
<span class="line"><span class="token comment"># 构建</span></span>
<span class="line"><span class="token function">pnpm</span> docs:build             <span class="token comment"># 构建生产版本</span></span>
<span class="line"><span class="token function">pnpm</span> docs:preview           <span class="token comment"># 预览构建结果</span></span>
<span class="line"></span>
<span class="line"><span class="token comment"># 部署</span></span>
<span class="line"><span class="token function">pnpm</span> deploy                 <span class="token comment"># 执行部署脚本</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="🎨-自定义样式" tabindex="-1"><a class="header-anchor" href="#🎨-自定义样式"><span>🎨 自定义样式</span></a></h2><h3 id="创建样式文件" tabindex="-1"><a class="header-anchor" href="#创建样式文件"><span>创建样式文件</span></a></h3><p>创建 <code>docs/.vuepress/styles/index.scss</code>：</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss"><pre><code class="language-scss"><span class="line"><span class="token comment">// 自定义 CSS 变量</span></span>
<span class="line"><span class="token selector">:root </span><span class="token punctuation">{</span></span>
<span class="line">  <span class="token property">--c-brand</span><span class="token punctuation">:</span> #42b883<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">--c-brand-light</span><span class="token punctuation">:</span> #42b883<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">--font-family</span><span class="token punctuation">:</span> <span class="token string">&#39;Noto Sans SC&#39;</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 自定义组件样式</span></span>
<span class="line"><span class="token selector">.my-component </span><span class="token punctuation">{</span></span>
<span class="line">  <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--c-bg-lighter<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="使用自定义组件" tabindex="-1"><a class="header-anchor" href="#使用自定义组件"><span>使用自定义组件</span></a></h3><p>创建 <code>docs/.vuepress/components/MyComponent.vue</code>：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code class="language-vue"><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-component<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ content }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span>
<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">  <span class="token literal-property property">title</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line">  <span class="token literal-property property">content</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在Markdown中使用：</p><div class="language-markdown line-numbers-mode" data-highlighter="prismjs" data-ext="md"><pre><code class="language-markdown"><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyComponent</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标题<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>内容<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="🔍-添加搜索功能" tabindex="-1"><a class="header-anchor" href="#🔍-添加搜索功能"><span>🔍 添加搜索功能</span></a></h2><p>安装搜索插件：</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token function">pnpm</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> @vuepress/plugin-search@next</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>在配置中添加：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> searchPlugin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@vuepress/plugin-search&#39;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineUserConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token function">searchPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">      <span class="token literal-property property">locales</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token string-property property">&#39;/&#39;</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">          <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">&#39;搜索文档&#39;</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="📱-响应式设计" tabindex="-1"><a class="header-anchor" href="#📱-响应式设计"><span>📱 响应式设计</span></a></h2><p>VuePress默认主题已经内置了响应式设计，但你也可以自定义响应式样式：</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss"><pre><code class="language-scss"><span class="line"><span class="token comment">// 移动端优化</span></span>
<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span></span>
<span class="line">  <span class="token selector">.navbar </span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token property">padding</span><span class="token punctuation">:</span> 0.5rem 1rem<span class="token punctuation">;</span></span>
<span class="line">  <span class="token punctuation">}</span></span>
<span class="line">  </span>
<span class="line">  <span class="token selector">.sidebar </span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">  <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="🎯-下一步" tabindex="-1"><a class="header-anchor" href="#🎯-下一步"><span>🎯 下一步</span></a></h2><p>现在你已经成功搭建了VuePress博客，接下来可以：</p><ol><li>📖 <a class="route-link" href="/docs/configuration.html">查看配置详解</a> - 了解更多配置选项</li><li>🚀 <a class="route-link" href="/docs/deployment.html">配置部署</a> - 设置自动化部署</li><li>🎨 <a class="route-link" href="/docs/customization.html">自定义主题</a> - 打造个性化外观</li></ol><h2 id="❓-常见问题" tabindex="-1"><a class="header-anchor" href="#❓-常见问题"><span>❓ 常见问题</span></a></h2><h3 id="q-开发服务器无法启动" tabindex="-1"><a class="header-anchor" href="#q-开发服务器无法启动"><span>Q: 开发服务器无法启动？</span></a></h3><p>A: 检查端口是否被占用，或尝试使用 <code>--port</code> 参数指定其他端口。</p><h3 id="q-构建失败" tabindex="-1"><a class="header-anchor" href="#q-构建失败"><span>Q: 构建失败？</span></a></h3><p>A: 检查配置文件语法，确保所有依赖都已正确安装。</p><h3 id="q-样式不生效" tabindex="-1"><a class="header-anchor" href="#q-样式不生效"><span>Q: 样式不生效？</span></a></h3><p>A: 确认样式文件路径正确，并检查CSS语法是否正确。</p><h3 id="q-如何添加新页面" tabindex="-1"><a class="header-anchor" href="#q-如何添加新页面"><span>Q: 如何添加新页面？</span></a></h3><p>A: 在相应目录创建Markdown文件，然后在配置中添加导航链接。</p><hr><p><em>遇到问题？查看<a class="route-link" href="/docs/configuration.html">配置详解</a>或<a href="https://github.com/your-username/vuepress-blog/issues" target="_blank" rel="noopener noreferrer">提交Issue</a></em></p></div><!--[--><!--]--></div><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link label" href="https://github.com/your-username/vuepress-blog/edit/main/docs/docs/getting-started.md" aria-label="在 GitHub 上编辑此页" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><svg class="edit-icon" viewbox="0 0 1024 1024"><g fill="currentColor"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></g></svg><!--]--><!--]-->在 GitHub 上编辑此页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">最后更新: </span><time class="meta-item-info" datetime="2025-11-19T15:18:42.000Z" data-allow-mismatch>2025/11/19 23:18</time></div><!----></div></footer><nav class="vp-page-nav" aria-label="page navigation"><!----><a class="route-link auto-link next" href="/docs/configuration.html" aria-label="/docs/configuration.html"><!--[--><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span class="external-link">/docs/configuration.html</span></div><!--]--></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!--]--><!--]--></div>
    <script type="module" src="/assets/app-CeP0rJKV.js" defer></script>
  </body>
</html>
